<template>
  <div class="index">
    <!-- 顶部 -->
    <div class="top"><Admin></Admin></div>
    <!-- bottom -->
    <div class="bottom">
      <div class="left"><SideNav></SideNav></div>
      <div class="right">
        <div class="content">
          <el-scrollbar style="height: 100%;">
            <!-- 当前位置 -->
            <div class="current_position">
              <p class="breadcrumb">当前位置 :</p>
              <el-breadcrumb separator="/">
                <el-breadcrumb-item class="up">设备相关</el-breadcrumb-item>
                <el-breadcrumb-item class="up"><a @click="goTo('/Equipment')">设备列表</a></el-breadcrumb-item>
                <el-breadcrumb-item>编辑</el-breadcrumb-item>
              </el-breadcrumb>
            </div>
            <!-- 用户信息 -->
            <div class="userinformation">
              <div class="title">设备信息</div>
              <div class="message">
                <p><span class="bar">设备ID </span><span>{{userinformation.id}}</span></p>
                <p><span class="bar">设备名 </span><input type="text" v-model="userinformation.name"></p>
                <p>
                  <span class="bar">设备状态 </span>
                  <span>
                    <el-radio-group v-model="userinformation.status">
                      <el-radio :label="2">使用中</el-radio>
                      <el-radio :label="1">待机中</el-radio>
                      <el-radio :label="3">已停用</el-radio>
                    </el-radio-group>
                  </span>
                </p>
                <p><span class="bar">联系电话 </span><input type="text" v-model="userinformation.mobile"></p>
                <p><span class="bar">设备sn </span><input type="text" v-model="userinformation.sn"></p>
                <p><span class="bar">设备地址 </span><input type="text" v-model="userinformation.address"></p>
                <p><span class="bar">经纬度 </span><input type="text" v-model="userinformation.lng" class="lng"><input type="text" v-model="userinformation.lat" class="lng"><i>温馨提示:使用腾讯地图坐标</i></p>
                <p><span class="bar">摄像头sn </span><input type="text" v-model="userinformation.cameraSn"></p>
                <p><span class="bar"></span><span><el-button @click="saveMessage()">保存</el-button></span></p>
              </div>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  let moment = require("moment")
  import Admin from '@/components/Admin.vue'
  import SideNav from '@/components/SideNav.vue'
  export default {
    name: 'EquipmentDetails',
    components:{
      Admin,
      SideNav
    },
    data () {
      return {
        id: '',//设备id
        userinformation:'',//设备信息
        status: 3,//账号状态
      }
    },
    mounted() {
      // 取到路由带过来的参数
      this.id = JSON.parse(JSON.stringify(this.$route.query.data.id));
      console.log("id的值是：",this.id);
      this.getUserDetails();
    },
    // 时间格式过滤
    filters: {
      dateForma(dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
        return moment(dataStr).format(pattern)
      }
    },
    methods: {
      // 路由
      goTo(path) {
        this.$router.push(path);
      },
      // 根据id查询设备详情
      getUserDetails(){
        this.$axios.post(this.baseURL+'device',{
          "id": this.id,
          "requestSource":"PC"
        }).then((res)=>{
          console.log(res,"根据id 查询设备详情");
          if(res.data.code==1){
            this.userinformation = res.data.data.records[0];
          }
        }).catch((err)=>{
          console.log('request fail', err);
        })
      },
      // 保存修改
      saveMessage(){
        this.$axios.put(this.baseURL+'device',{
          "id":this.userinformation.id,//设备id
          "name":this.userinformation.name,//设备id
          "status": this.userinformation.status,//设备状态
          "mobile": this.userinformation.mobile,//设备电话
          "sn": this.userinformation.sn,//设备sn
          "address": this.userinformation.address,//设备地址
          "lng": this.userinformation.lng,//设备经度
          "lat": this.userinformation.lat,//设备维度
          "cameraSn": this.userinformation.cameraSn,//摄像头sn
          "requestSource":"PC"
        }).then((res)=>{
          if(res.data.code==1){
            this.$message({
              message: '修改成功',
              type: 'success'
            });
            this.$router.go(-1);//返回上一层
          }
        }).catch((err)=>{
          console.log('request fail', err);
        })
      },
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  @import '@/assets/css/index.scss'; //这个分号一定要写，要不会报错
  @import '@/assets/css/user.scss'; //这个分号一定要写，要不会报错
  .message{
    position: relative;
    p{
      line-height: 35px!important;
      span{
        padding-left: 0!important;
      }
      input{
        height: 30px;
        width: 250px;
        border: 1px solid #a4a4a4;
        border-radius: 3px;
        padding: 0 0 0 2px;
        box-sizing: border-box;
        outline: none;
      }
      i{
        font-style: normal;
        color: gray;
      }
    }
    .bar{
      width: 120px;
      padding-right: 20px;
      box-sizing: border-box;
    }
    .lng{
      width: 120px;
      margin-right: 8px;
    }
  }

</style>
